<script setup lang="ts">
import { defineEmits,ref, computed } from 'vue';
const props = defineProps({
  backgroundColor:String,
  color:String,
  borderColor:String,
  titleBarList:Array
});

// 使用 defineExpose 暴露方法给父组件
defineExpose({
  changeTitle
})
const sidebar = ref(null);//falseBody
const datalist = ref();//标题依赖数组
const hasList = ref();//内容依赖数组
datalist.value = props.titleBarList;

datalist.value.forEach((item,index) => {
  
  if(index == 0){
    item.checked = true;
  }else{
    item.checked = false;
  }
});

hasList.value = datalist.value[0].has;
console.log(datalist.value);

//样式传参
const theStyles = computed(()=>{
  return {
    backGroundColor:props.backgroundColor || 'rgb(230,230,230)',
    titleFontColor:props.color || 'rgb(100,100,100)',
      titleBorderColor:props.borderColor || '#5CAFF2'
    }
  })

// 点击右侧内容
function changeContent(index) {


  emit('contentClick',index);
}

//子向父传参
const emit = defineEmits(['titleClick','contentClick']);

//左边点击切换颜色
function changeTitle(item){

 for(let i in datalist.value){
   datalist.value[i].checked = false;

  if(datalist.value[i].id == item.id){
    datalist.value[i].checked = true;
    hasList.value = datalist.value[i].has;
  }
 }

 emit('titleClick',item);
 
}
</script>

<template>
  <div class="falseBody" ref="sidebar" :style="{backgroundColor:theStyles.backGroundColor,color:theStyles.titleFontColor}">
    <!-- 左边 -->
    <div class="left">
      <div class="titleBar" v-for="(item,index) in datalist" :key="item.id" @click="changeTitle(item)" :style="{borderLeft:item.checked ? `6px solid ${theStyles.titleBorderColor}` : 'none'}">
        {{ item.title }}
      </div>
    </div>

    <!-- 右边 -->
    <div class="right">
      <slot name="rightHeader"></slot>
      <div class="contentBar" v-for="(item,index) in hasList" :key="index" @click="
      changeContent(item)" :style="{backgroundColor:item.checked ? '#5CAFF2' : 'white',color:item.checked ? 'white' : '#646464'}">
        {{ item }}
      </div>
      <div v-if="hasList.length == 0" class="noData">
        <slot name="noData"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<style scoped>
*{
    margin: 0;
    padding: 0;
  }
.falseBody{
  width:350px;
  display: flex;
  justify-content: space-between;
  height: 500px;
  box-sizing: border-box;
  padding:5px 0;
}
/* 暂无数据 */
.noData{
  width:100%;
}
/* 左 */
.left{
  width:30%;
  overflow-y: auto;
}
.titleBar{
  width:100%;
  height:45px;
  box-sizing: border-box;
  padding:0 10px;
  line-height:45px;
  text-align: center;
  font-size:15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius:3px;
  margin-bottom:2px;
  transition:all 0.2s;
  overflow: hidden;
  background-color: white;
}
/* 右 */
.right{
  width:68%;
  height:100%;
  box-sizing: border-box;
  margin-right:0.8%;
  border-radius:5px;
  overflow-y: auto;
  background-color: white;
}
.contentBar{
  width:100%;
  height:45px;
  box-sizing: border-box;
  padding:0 10px;
  line-height:45px;
  text-indent:10px;
  font-size:15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius:3px;
  border-bottom:1px solid rgb(200,200,200);
  transition:all 0.3s;
  overflow: hidden;
  background-color: white;
}
</style>
